{% extends 'layout_index.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{% block title %}
    <title>学生信息管理系统</title>
{% endblock %}

{% block main_content %}
    <div class="index-info-container">
        <div class="index-title">
            <h3>欢迎使用学生信息管理系统</h3>
        </div>
        <div class="dashboard-row">
            <div class="dashboard-card">
                <div class="icon"><i class="fa-solid fa-chalkboard"></i></div>
                <div class="count">{{ class_count }}</div>
                <div class="label">班级数</div>
            </div>
            <div class="dashboard-card">
                <div class="icon"><i class="fa-solid fa-users"></i></div>
                <div class="count">{{ student_count }}</div>
                <div class="label">学生总数</div>
            </div>
            <div class="dashboard-card">
                <div class="icon"><i class="fa-solid fa-building-columns"></i></div>
                <div class="count">{{ grade_count }}</div>
                <div class="label">年级数</div>
            </div>
            <div class="dashboard-card">
                <div class="icon"><i class="fa-solid fa-graduation-cap"></i></div>
                <div class="count">{{ profession_count }}</div>
                <div class="label">专业数</div>
            </div>
        </div>
        <div class="chart-row">
            <div class="chart-container">
                <div class="chart-title">男女比例</div>
                <canvas id="genderChart"></canvas>
            </div>
            <div class="chart-container">
                <div class="chart-title">专业人数分布</div>
                <canvas id="professionChart"></canvas>
            </div>
            <div class="chart-container">
                <div class="chart-title">年级班级数统计</div>
                <canvas id="gradeBarChart"></canvas>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
    <script>
        // 男女比例
        const genderData = {
            labels: ['男', '女'],
            datasets: [{
                data: [{{ male_count|default:0 }}, {{ female_count|default:0 }}],
                backgroundColor: ['#36A2EB', '#FF6384'],
                hoverOffset: 8
            }]
        };
        const genderConfig = {
            type: 'doughnut',
            data: genderData,
            options: {
                cutout: '70%',
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        align: 'center'
                    },
                    datalabels: {
                        color: '#333',
                        font: {weight: 'bold', size: 16},
                        formatter: (value, ctx) => {
                            let sum = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                            return sum ? (value / sum * 100).toFixed(1) + '%' : '0%';
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        };
        new Chart(document.getElementById('genderChart'), genderConfig);

        // 专业分布
        const professionLabels = [{% for p in profession_data %}'{{ p.name }}'{% if not forloop.last %}, {% endif %}{% endfor %}];
        const professionCounts = [{% for p in profession_data %}{{ p.count|default:0 }}{% if not forloop.last %}, {% endif %}{% endfor %}];
        const professionColors = ['#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#36A2EB', '#FF6384', '#8BC34A', '#E91E63'];
        const professionData = {
            labels: professionLabels,
            datasets: [{
                data: professionCounts,
                backgroundColor: professionColors,
                hoverOffset: 8
            }]
        };
        const professionConfig = {
            type: 'doughnut',
            data: professionData,
            options: {
                cutout: '70%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        align: 'center'
                    },
                    datalabels: {
                        color: '#333',
                        font: {weight: 'bold', size: 14},
                        formatter: (value, ctx) => {
                            let sum = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                            return sum ? (value / sum * 100).toFixed(1) + '%' : '0%';
                        }
                    }
                }
            },
            plugins: [ChartDataLabels]
        };
        new Chart(document.getElementById('professionChart'), professionConfig);

//  年级班级数条形统计图
const gradeLabels = [{% for g in grade_data %}
                        '{{ g.name }}'
                        {% if not forloop.last %},
                    {% endif %}{% endfor %}];
const gradeCounts = [{% for g in grade_data %}{{ g.count|default:0 }}{% if not forloop.last %}, {% endif %}{% endfor %}];

// 创建渐变色数组，每个条形使用不同的渐变色
const ctx = document.getElementById('gradeBarChart').getContext('2d');
const gradientColors = [
    ['#36a2eb', '#87cefa'],  // 蓝色
    ['#ff6384', '#ffb1c1'],  // 粉色
    ['#4bc0c0', '#96e6e6'],  // 青色
    ['#ffcd56', '#ffe9a6'],  // 黄色
    ['#9966ff', '#c4a6ff'],  // 紫色
    ['#ff9f40', '#ffcf9f']   // 橙色
];

// 创建每个条形的渐变色
const gradients = gradeCounts.map((_, index) => {
    const colorPair = gradientColors[index % gradientColors.length];
    const gradient = ctx.createLinearGradient(0, 0, 300, 0);
    gradient.addColorStop(0, colorPair[0]);  // 左侧颜色
    gradient.addColorStop(1, colorPair[1]);  // 右侧颜色
    return gradient;
});

const gradeBarConfig = {
    type: 'bar',
    data: {
        labels: gradeLabels,
        datasets: [{
            label: '班级数',
            data: gradeCounts,
            backgroundColor: gradients,  // 使用渐变色数组
            borderWidth: 0,
            borderRadius: 4,
            borderSkipped: false,
            maxBarThickness: 30
        }]
    },
    options: {
        indexAxis: 'y',  // 保持水平条形图
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {display: false},
            datalabels: {
                align: 'right',     // 右对齐，显示在条形末端
                anchor: 'end',      // 锚点在条形末端
                color: '#333',      // 文本颜色
                font: {weight: 'bold', size: 14},
                formatter: (value) => value,
                padding: {right: 6}  // 从条形末端的距离
            }
        },
        scales: {
            x: {
                display: false,      // 不显示X轴
                grid: {
                    display: false   // 不显示网格线
                }
            },
            y: {
                grid: {
                    display: false   // 不显示水平网格线
                },
                ticks: {
                    font: {size: 12, weight: 'bold'},
                    color: '#555'
                }
            }
        },
        layout: {
            padding: {
                right: 30  // 为数据标签留出空间
            }
        },
        animation: {
            duration: 1500,
            easing: 'easeOutQuart'
        }
    },
    plugins: [ChartDataLabels]
        };
        new Chart(document.getElementById('gradeBarChart'), gradeBarConfig);
    </script>
{% endblock %}